<template>
	<view>
		<view class="search-zixun ">
			<!-- 搜索结果 -->
			<view class="search-content share">
				<view class="title-left">
					<text>{{inputValue}}</text> - <text>资讯</text>
				</view>

				<view class="title-right">
					<view class="paixu-all" @click="showPai(1)">
						排序
						<image src="/static/down.png" mode=""></image>
					</view>
					<view class="paixu" v-show="showPaixu == 1">
						<view @click="zixunPaixu(index)" v-for="(item,index) in sortTab"
							:class="{lighting: zixunActive == index}" :key="index">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="search-li share" v-for="(item,index) in zixunContents" :key="index">
				<view class="zixun-content">
					<view class="high-light" v-html="highLight(item.title)"></view>
					<view>{{item.publictime}}</view>
				</view>
				<view class="-zixun-right">
					<image class="api-photo" :src="item.images" mode=""></image>
				</view>
			</view>
			<!-- /搜索结果 -->

			<!-- 点击加载更多 -->
			<view class="look-more" v-if="noneData" @click="updateMore">
				<view class="more-box">
					<text v-if="showBottom">查看更多</text>
					<text class="show-bottom" v-else>没有更多的了</text>
				</view>
			</view>
			<!-- /点击加载更多 -->
		</view>
	</view>
</template>

<script>
	import {
		request,
		postRequest
	} from "../utils/request.js"
	export default {
		name: "news",
		data() {
			return {
				showBottom: true,
				zixunPage: 1,
				zixunActive: 0,
				noneData: true,
				showPaixu: 0,
				city: '',
				sortTab: ["综合排序", "时间排序"],
				zixunContents: this.zixunContent
			};
		},
		props: {
			inputValue: String,
			zixunContent: Array,
			fenci: Array
		},
		watch: {
			zixunContent(val) {
				this.zixunContents = val;
			}
		},
		mounted() {
			this.city = uni.getStorageSync("city");
		},
		methods: {
			// 刷新页码和刷新加载更多
			reLoad() {
				this.showBottom = true;
				this.zixunPage = 1;
			},

			// 显示两个排序按钮
			showPai(value) {
				this.showPaixu == value ? this.showPaixu = 0 : this.showPaixu = value;
			},

			// 切换排序
			zixunPaixu(index) {
				this.zixunActive = index;
				this.zixunActive === 0 ? this.getRequest() : this.getRequest("time");
			},
			
			// 排序的数据请求
			getRequest(value) {
				let getData = {
					citycode: this.city.citycode,
					action: "list",
					keywords: this.inputValue,
					pagesize: 10,
					ordertype: value
				}
				request("index.php", getData, "GET").then((res) => {
					this.zixunContents = res.data;
				})
			},
			// 点击更多
			updateMore() {
				this.zixunPage++;
				request("index.php", {
					citycode: this.city.citycode,
					action: "list",
					keywords: this.inputValue,
					pagesize: 10,
					page: this.zixunPage
				}, "GET").then((res) => {
					if (res.data == "") {
						this.showBottom = false;
					} else {
						this.showBottom = true;
						this.zixunContents = this.zixunContents.concat(...res.data);
					}
				})


			},
			highLight(val) {
				this.fenci.forEach((item) => {
					val = val.replace(new RegExp(item, "gi"),
						`<span style="color: #FF6600">${item}</span>`);
				})
				return val;
			}
		}
	}
</script>

<style  lang="stylus">
	@import '../common.styl'
</style>
